웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS에서 컴포넌트 사이의 데이터를 전달하는 방법중 하나인 Provide / Inject 방법에 대하여 알아봅니다.
VueJS에는 다양한 성격의 데이터들이 존재하는데요 ~ 이 데이터들을 각각의 컴포넌트 사이에 주고 받기 위한 방법으로 props를 사용하는 방법이 대표적입니다. 예를들어 name prop에 "abc" 값을 전달하기 위해서 아래처럼 사용합니다.
하지만 컴포넌트 사이의 단계가 복잡해질수록 하위의 하위의 또 다른 하위 컴포넌트까지 전달하려면 계속해서 props를 반복 선언해야한다는 큰 불편함이 존재합니다.
물론 전역 데이터를 설정하여 사용할 수 있겠지만 반드시 필요한 경우가 아니라면 다른 방법이 필요합니다. 이 때 바로 Provide / Inject를 사용하여 해결하는 것이 가능합니다.
오랜만에 VueJS를 사용하고 있는데 이 기능은 예전 VueJS 2.0에는 없던 기능으로 알고 있는데 새로 추가된 것으로 보이는군요! 그럼 어떻게 사용하는지 알아보겠습니다.
먼저 Provide는 데이터를 전달할 제일 상위 컴포넌트가 되겠군요. 아래와 같이 설정합니다.
@ ParentComponent.vue
이때 provide는 함수 형태로 리턴해야되니 주의하시기 바랍니다. 하위의 어떤 컴포넌트든 siteName에 접근할 수 있겠죠. inject 코드를 추가함으로써 가능합니다.
@ ChildCComponent.vue
모든 설정이 끝났습니다. 매우 간단하죠? 이렇게 provide를 한 번 설정하면 쉽게 데이터에 접근하여 값을 가져올 수 있습니다.
[참고]
Provide는 React의 Context API와 매우 비슷합니다. React에서 사용하는 Context API 역시 Provider를 사용하고 Consumer를 자식 컴포넌트에 사용해 데이터에 접근하는 것이 가능하죠. 차이점이라면 Provide / Inject가 페어로 사용되는 것에 반하여 React Context API의 경우 Provider / Consumer를 사용하는 것이 차이점이 되겠습니다.
여기까지 VueJS의 Provide / Inject에 대하여 간략하게 알아보았습니다.
# VueJS Provide와 Inject 사용하기
VueJS에는 다양한 성격의 데이터들이 존재하는데요 ~ 이 데이터들을 각각의 컴포넌트 사이에 주고 받기 위한 방법으로 props를 사용하는 방법이 대표적입니다. 예를들어 name prop에 "abc" 값을 전달하기 위해서 아래처럼 사용합니다.
<ParentComponent>
<ChildComponent :name="siteName" />
</ParentComponent>
<ChildComponent :name="siteName" />
</ParentComponent>
하지만 컴포넌트 사이의 단계가 복잡해질수록 하위의 하위의 또 다른 하위 컴포넌트까지 전달하려면 계속해서 props를 반복 선언해야한다는 큰 불편함이 존재합니다.
<ParentComponent>
<ChildAComponent :name="siteName" />
<ChildBComponent :name="siteName" />
<ChildCComponent :name="siteName" />
...
<ChildAComponent :name="siteName" />
<ChildBComponent :name="siteName" />
<ChildCComponent :name="siteName" />
...
물론 전역 데이터를 설정하여 사용할 수 있겠지만 반드시 필요한 경우가 아니라면 다른 방법이 필요합니다. 이 때 바로 Provide / Inject를 사용하여 해결하는 것이 가능합니다.
오랜만에 VueJS를 사용하고 있는데 이 기능은 예전 VueJS 2.0에는 없던 기능으로 알고 있는데 새로 추가된 것으로 보이는군요! 그럼 어떻게 사용하는지 알아보겠습니다.
먼저 Provide는 데이터를 전달할 제일 상위 컴포넌트가 되겠군요. 아래와 같이 설정합니다.
@ ParentComponent.vue
export default {
name: 'ParentComponent',
provide: {
return {
siteName: 'webisfree'
}
}
}
...
name: 'ParentComponent',
provide: {
return {
siteName: 'webisfree'
}
}
}
...
이때 provide는 함수 형태로 리턴해야되니 주의하시기 바랍니다. 하위의 어떤 컴포넌트든 siteName에 접근할 수 있겠죠. inject 코드를 추가함으로써 가능합니다.
@ ChildCComponent.vue
export default {
name: 'ChildCComponent',
inject: ['siteName']
...
}
name: 'ChildCComponent',
inject: ['siteName']
...
}
모든 설정이 끝났습니다. 매우 간단하죠? 이렇게 provide를 한 번 설정하면 쉽게 데이터에 접근하여 값을 가져올 수 있습니다.
[참고]
Provide는 React의 Context API와 매우 비슷합니다. React에서 사용하는 Context API 역시 Provider를 사용하고 Consumer를 자식 컴포넌트에 사용해 데이터에 접근하는 것이 가능하죠. 차이점이라면 Provide / Inject가 페어로 사용되는 것에 반하여 React Context API의 경우 Provider / Consumer를 사용하는 것이 차이점이 되겠습니다.
여기까지 VueJS의 Provide / Inject에 대하여 간략하게 알아보았습니다.
아래의 글도 찾고 계시지 않나요?